<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zrender - 002</title>
    <link rel="stylesheet" href="../lib/main.css">
</head>

<body>
    <div id="main"></div>
    <script src="../lib/zrender.js"></script>
    <script>
        window.onload = function () {
            var container = document.querySelector('#main');
            var zr = zrender.init(container);

            var w = zr.getWidth();
            var h = zr.getHeight();

            var isMouseDown = false;
            zr.on('mousedown', function () {
                isMouseDown = true;
            });
            zr.on('mouseup', function () {
                isMouseDown = false;
            });

            var elementStyle = {
                stroke: '#ccc',
                fill: 'white'
            };

            var group = new zrender.Group();
            for (var i = 0; i < 10; ++i) {
                var r = 50 * Math.random() + 20;
                var circle = new zrender.Circle({
                    shape: {
                        cx: 0,
                        cy: 0,
                        r: r
                    },
                    position: [
                        (w * 0.6 - r * 2) * Math.random() + r + w * 0.2,
                        (h * 0.6 - r * 2) * Math.random() + r + h * 0.2
                    ],
                    style: elementStyle,
                    draggable: true
                })
                    .on('mousemove', function () {
                        if (isMouseDown) {
                            var rect = group.getBoundingRect();
                            boundingRect.setShape({
                                x: rect.x,
                                y: rect.y,
                                width: rect.width,
                                height: rect.height
                            });
                        }
                    });
                group.add(circle);
            }
            zr.add(group);

            var rect = group.getBoundingRect();
            var boundingRect = new zrender.Rect({
                shape: {
                    cx: 0,
                    cy: 0,
                    x: rect.x,
                    y: rect.y,
                    width: rect.width,
                    height: rect.height
                },
                style: {
                    fill: 'none',
                    stroke: '#14f1ff'
                }
            });
            zr.add(boundingRect);
        }
    </script>
</body>

</html>